<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>    
    <div id="app">
        <p>{{age}}</p>
        <input type="button" value="按钮01" @click="changeAge"  >
        <hr/>
        <div v-if="age>=18">已成年</div>
        <hr/>
        <div v-show="age>=18">已成年</div>

        <!--

            v-if和v-show的区别？
            相同点：
                都是在控制dom元素的显示和隐藏

            不同点：
            1、原理不同：
                 v-if是通过dom元素的删除和添加，来完成显示和隐藏，
                 v-show是通过修改样式属性display的值，来完成显示和隐藏。

            2、性能消耗的不同
                 v-if的性能损耗体现在切换时，
                 v-show的性能损耗在首次（特别是首次处于的显示的情况下）

            3、使用场景的不同
                v-if使用在元素切换不频繁的场景。
                v-show使用在元素切换频繁的场景。

            4、安全性的不同
                v-if的安全性好
                v-show的安全性不好。
         -->
         <hr/>
         <p v-if="age<3">宝宝</p>
         <p v-else-if="age<18">大宝宝</p>
         <p v-else-if="age<=25">巨婴</p>
         <p v-else>老宝宝</p>
         <input type="button" value="长大" @click="incAge"  >
    </div>
</body>
</html>
<script src="./js/vue.js"></script>

<script>

    let vm = new Vue({
        el:"#app",
        data:{
            age:2
        },
        methods:{
            changeAge(){
                this.age = this.age>=18?12:20;
            },
            incAge(){
                this.age++;
            }
        }     
    });

    


</script>